<template>
  <div class="boss">
    <van-nav-bar
  left-arrow
  @click-left="onClickLeft"
/>
<div style="font-weight: bold;margin-top: 30px;text-indent: 1em;">
  注册爱坤的账号
   <p style="font-size: 12px;color: #278cff;font-weight: 500;margin-top: 20px;">系统会根据您选择的国家/地区的法律法规存储您的个人信息</p  >
</div>
<van-form validate-first @submit="onSubmit" >
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
      label="账号邮箱"
    v-model="user.name"
    name="username"
    placeholder="账号邮箱"
   
    :rules="[{ validator, message: '请输入正确的邮箱' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field
    label="密码"
    v-model="user.pwd"
    type="password"
    name="password"
    placeholder="密码"
    autocomplete="off"
    :rules="[{pwd, message: '请输入正确密码' }]"
  />
  <van-field name="checkbox" style="margin-left: 10px;">
  <template #input>
    <van-checkbox v-model="user.checkbox" icon-size="16px" style="border: 2px solid #000;border-radius: 100%;"/>
     <div style="display: inline-block;line-height: 44px;margin-left: 10px;font-size: 15px;">已阅读并同意爱坤账号用户协议和隐私政策</div>
  </template>
</van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" >注册</van-button>
  </div>
</van-form>
<div class="go-login">
 <span @click="login()"> 已有账号? 去登录</span>
</div>
<van-popup v-model="show" round  class="popup">您已成功注册账号,即将进入登录页面</van-popup>
  </div>
</template>

<script>
export default {
  data(){
     return {
      user:{name: '',
            pwd: '',
            checkbox: false,
          },
      show :false,
     }
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home")
    },
      // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
        // /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ 邮箱
      return /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val);
    },
    pwd(val){
     return /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(val)
    },
    login(){
       this.$router.push("/login")
    },
    onSubmit(values) {
      if(values.name !== "" && values.password !== "" && values.checkbox !=false) {
        let timer
          this.show = true
          timer = setTimeout(()=>{
            this.$router.push('/login')
          },2000)
      }
    
    },
},

}
</script>

<style lang="less" scoped>
  .boss {
    margin: 0 ;
    padding: 0 ;
    font-size: 100px;
    overflow: hidden;
  }
  .van-form {
    margin-top: 100px;
  }
  .go-login {
    margin-top: 120px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 22px;
  }
  .popup {
     width: 100%;
     height: 30%;
     text-align: center;
     line-height: 1000px;

  }
</style>